<template>
    <div class="w-full max-w-4xl mx-auto flex flex-col items-center px-4">
        <!-- 文章列表 -->
        <div v-for="articeList in articleList" class="divCommon group bg-white/40 rounded-xl shadow-sm hover:shadow-md transition-all 
                   cursor-pointer p-4 mb-4 w-full border border-gray-100 hover:border-blue-100
                   active:scale-[98%] transform duration-200" @click="goArticleDetails(articeList)">
            <div class="flex flex-col md:flex-row gap-4 h-full">
                <!-- 图片 -->
                <div class="md:w-1/3 max-h-48 md:h-auto rounded-xl overflow-hidden shadow-sm">
                    <img :src="articeList.titleImg" alt="文章封面" class="w-full h-full object-cover transform transition-transform 
                               duration-300 group-hover:scale-105" draggable="false" oncontextmenu="return false;" />
                </div>

                <!-- 右侧信息 -->
                <div class="md:w-2/3 flex flex-col justify-between py-1">
                    <h2 class="text-xl font-bold text-gray-800 mb-2 line-clamp-2">
                        {{ articeList.title }}
                    </h2>

                    <div class="flex-1 mb-3">
                        <p class="text-gray-600 line-clamp-3 text-base leading-relaxed">
                            <mdv3Show v-model="articeList.content"></mdv3Show>
                        </p>
                    </div>

                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="text-sm text-gray-500">标签：</span>
                            <n-tag v-for="tag in articeList.tags" size="small"
                                class="!bg-blue-50/40 !text-blue-700 !border-blue-200 rounded-lg px-2">
                                #{{ tag }}
                            </n-tag>
                        </div>
                        <span class="text-sm text-gray-500 whitespace-nowrap">
                            📅 {{ articeList.updateTime }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <n-pagination v-model:page="form.page" v-model:page-size="form.pageSize" :item-count="total" show-size-picker
            :page-sizes="[1, 5, 10]" @update:page="cg" @update:pageSize="cgbf"
            class="mt-6 [&>.n-pagination__goto]:!hidden md:[&>.n-pagination__goto]:!block" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue';
import { onMounted } from 'vue';
import { getArticleList } from '@/api/home/index';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler'
import { useRouter } from 'vue-router';
import mdv3Show from '@/components/mdv3Show.vue';
type ArticleList = {
    articleId: number,
    content: string,
    title: string,
    titleImg: string,
    tags: string,
    updateTime: string
}
const props = defineProps({
    searchString: {
        type: String,
        default: ''
    },
    searchTag: {
        type: Object,
        default: ''
    }
})
let tag = ref()
const articleList = ref<ArticleList[]>([])
const total = ref(0)
const $router = useRouter()
const form = reactive({
    page: 1,
    pageSize: 1,
    title: '',
    tags:''
})
const getTagListTask = async () => {
    let res = await AsyncTaskHandler.handleSingleTask(getArticleList(form))
    res.code === 0 && (articleList.value = res.data.records, total.value = res.data.total) || ''
}
const cg = (page: number) => {
    getTagListTask()
}
const cgbf = () => {
    form.page = 1
    getTagListTask()
}
const goArticleDetails = (articeList: ArticleList) => {
    $router.push({ path: '/articleDetail', query: { id: articeList.articleId } })
}
onMounted(() => {
    getTagListTask()
})
watch(() => props.searchString, (newVal) => {
    form.page = 1
    form.title = props.searchString
    console.log("666666", form.title);
    
    getTagListTask()
})

watch(() => props.searchTag, (newVal) => {
    form.page = 1
    tag.value = newVal
    form.tags = Array.isArray(props.searchTag) ? props.searchTag.join(',') : ''
    getTagListTask()
}, {
    immediate: true,
    deep:true
})
</script>

<style scoped lang="scss">
/* src/assets/styles/global.css */
@import 'highlight.js/styles/github.css';

/* 增强代码块显示 */
pre code.hljs {
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    display: block;
    margin: 1rem 0;
    background: #f8f8f8;
}

.line-clamp pre {
    display: inline;
    /* 解决 line-clamp 与 pre 的冲突 */
}
.showImg img {
    object-fit: cover;
}

.line-clamp {
    line-height: 1.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
:deep(.github-markdown-body){
    padding: 0;
}
</style>